<template>
  <el-container>
    <div style="padding: 10px;padding-bottom: 0">
      <div class="report_header" ref="headerHeight">
        <div style="display: flex;align-items: center">
          <div class="report_header_left"></div>
          <div style="width: 800px;display: flex;align-items: center;">
            <div class="report_header_date">
              <el-date-picker v-model="query.date" value-format="yyyy-MM-dd" type="daterange" align="right"
                unlink-panels range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" :picker-options="pickerOptions">
              </el-date-picker>
            </div>
            <div class="report_header_query">
              <el-select v-model="productName" clearable placeholder="请选择商品" filterable @focus="getProductList"
                value-key="id" @change="changeProduct" :filter-method="queryProduct">
                <el-option v-for="item in productOptions" :key="item.id" style="width:650px" :label="item.name" :value="item">
                  <div style="display: flex">
                    <span style="width: 80px;overflow: hidden;text-overflow: ellipsis;">{{ item.sn }}</span>
                    <span style="float: left;width: 160px;overflow: hidden;text-overflow: ellipsis;margin-left: 10px">{{
                        item.name
                      }}</span>
                    <div style="width: 200px;">
                      <span style="color: #8492a6; font-size: 8px;">{{ item.spec1 }}</span>
                    </div>
                  </div>
                </el-option>
                <div style="display: flex;width: 100%;position: absolute;bottom: 0">
                  <div style="width: 50%;background-color: rgb(248,248,248);"></div>
                  <div class="elOption" @click="toAddProduct">搜索商品</div>
                </div>
                <div style="height: 40px"></div>
              </el-select>
            </div>
            <div class="report_header_query">
              <el-select v-model="memberName" value-key="id" clearable placeholder="请选择客户" filterable @focus="getMemberList"
                @change="selectMember" :filter-method="queryMember">
                <el-option v-for="item in memberIdOptions" style="width: 600px;" :key="item.id" :label="item.name"
                  :value="item">
                  <div style="display: flex">
                    <span style="width: 60px;">{{ item.code }}</span>
                    <span style="float: left;width: 100px;overflow: hidden;text-overflow: ellipsis;">{{
                        item.name
                      }}</span>
                    <span style="float: right; color: #8492a6; font-size: 8px;width: 80px;margin-left: 10px">{{
                        item.mobile
                      }}</span>
                    <div style="width: 200px;">
                      <span style="color: #8492a6; font-size: 8px;">{{ item.address }}</span>
                    </div>
                  </div>
                </el-option>
                <div style="display: flex;width: 100%;position: absolute;bottom: 0">
                  <div style="width: 50%;background-color: rgb(248,248,248);"></div>
                  <div class="elOption" @click="toSearchMember">搜索客户</div>
                </div>
                <div style="height: 30px"></div>
              </el-select>
            </div>
          </div>
          <div style="display: flex;flex-direction: row;justify-content: flex-end;width: 100%;">
            <div style="display: flex;flex-direction: row;flex-wrap: wrap;overflow: hidden;height:41px;justify-content: flex-end;">
              <div class="report_header_query">
                <el-input placeholder="请输入订单号" v-model="query.orderSn" clearable></el-input>
              </div>
              <div class="report_header_query">
                <el-input placeholder="请输入收货信息" v-model="query.phone" clearable></el-input>
              </div>
            </div>
            <el-button style="margin-left: 10px;margin-top: 7px;height: 100%" size="small" type="primary" @click="queryClick">查询
            </el-button>
            <!--            隐藏显示按钮-->
            <!--            <div @click="chooseClick" style="width: 46px;height: 32px;background-color: #409EFF;margin-top: 7px;margin-left: 10px;border-radius: 4px;display: flex;justify-content: center;align-items: center;">-->
            <!--              <i style="font-size: 24px;color: white;" :class="[queryType == false?'el-icon-caret-bottom':'el-icon-caret-top']"></i>-->
            <!--            </div>-->
            <!-- <el-button style="margin-left: 10px;margin-top: 7px;height: 100%" size="small" type="primary"
                       @click="addClick"
                       v-permission="['order.add']">新增
            </el-button> -->
          </div>
        </div>
        <div style="width: 800px;display: flex;align-items: center;" v-show="queryType == true">
          <!--          这是放隐藏条件的容器-->
        </div>
      </div>
    </div>
    <div class="pd10">
      <el-tabs type="border-card" @tab-click="tabsClick" :style="{height:curHeight+'px'}">
     <el-tab-pane label="全部">
          <div class="details_card" v-loadMore="[payLoads,'order-list0']" :style="{height:tabsHeight+'px'}">
            <orderList :orderForm="orderForm" @detailsClick="detailsClick"></orderList>
          </div>
        </el-tab-pane>
        <el-tab-pane label="进行中">
          <div class="details_card" v-loadMore="[payLoads,'order-list1']" :style="{height:tabsHeight+'px'}">
            <orderList :orderForm="orderForm" @detailsClick="detailsClick"></orderList>
          </div>
        </el-tab-pane>
        <el-tab-pane label="待付款">
          <div class="details_card" v-loadMore="[payLoads,'order-list2']" :style="{height:tabsHeight+'px'}">
            <orderList :orderForm="orderForm" @detailsClick="detailsClick"></orderList>
          </div>
        </el-tab-pane>
        <!-- <el-tab-pane label="待发货">
          <div class="details_card" v-loadMore="[payLoads,'order-list2']" :style="{height:tabsHeight+'px'}">
            <orderList :orderForm="orderForm" @detailsClick="detailsClick"></orderList>
          </div>
        </el-tab-pane>
        <el-tab-pane label="待收货">
          <div class="details_card" v-loadMore="[payLoads,'order-list3']" :style="{height:tabsHeight+'px'}">
            <orderList :orderForm="orderForm" @detailsClick="detailsClick"></orderList>
          </div>
        </el-tab-pane> -->
        <el-tab-pane label="已完成">
          <div class="details_card" v-loadMore="[payLoads,'order-list3']" :style="{height:tabsHeight+'px'}">
            <orderList :orderForm="orderForm" @detailsClick="detailsClick"></orderList>
          </div>
        </el-tab-pane>
        <el-tab-pane label="已关闭">
          <div class="details_card" v-loadMore="[payLoads,'order-list4']" :style="{height:tabsHeight+'px'}">
            <orderList :orderForm="orderForm" @detailsClick="detailsClick"></orderList>
          </div>
        </el-tab-pane>
      </el-tabs>
    </div>
    <el-dialog title="新增商品" :visible.sync="orderVisible" width="950px" v-el-drag-dialog :before-close="orderClose">
      <div style="position: relative;">
        <productTable ref="productList" @doubleClick="doubleClick" @addClick="addProductClick"></productTable>
      </div>
    </el-dialog>
    <el-dialog title="双击选择客户" :visible.sync="memberTableVisible" width="950px" v-el-drag-dialog append-to-body
      :before-close="memberTableClose">
      <div style="position: relative;">
        <member-table :key="times" @memberDouble="memberDouble" @memberTableClose="memberTableClose"></member-table>
      </div>
    </el-dialog>
    <el-footer class="el-footerBox" style="margin-bottom: auto">
      <pagination :total="total" :page.sync="pageNum" :limit.sync="pageSize" @pagination="loadOrder"></pagination>
    </el-footer>
  </el-container>
</template>

<script>
  import elDragDialog from '@/directive/el-drag-dialog' // base on element-ui
  import memberTable from '@/components/MemberTable/index'
  import {
    list as sysMchList,
    getInfo
  } from '@/api/sysMch'
  import productTable from '@/components/ProductList/productList'
  import {
    EventBus
  } from '@/api/eventBus'
  import orderList from './components/list'
  import {
    list
  } from '@/api/order'
  import Pagination from '@/components/Pagination'
  import utils from '../../utils/utils.js'
  import loadMore from '@/utils/more.js'
  import {
    list as memberList
  } from '@/api/member'
  import {
    list as productList
  } from '@/api/product'
  import permission from '@/directive/permission/index.js' // 权限判断指令
  import {
    mapGetters
  } from 'vuex'

  export default {
    name: 'order-list',
    directives: {
      loadMore,
      permission,
      elDragDialog
    },
    activated() {
      this.payLoads = new Date().getTime()
    },
    data() {
      return {
        payLoads: '',
        orderForm: [],
        times: '',
        pageNum: 1,
        memberTableVisible: false,
        orderVisible: false,
        memberName: '',
        productName: '',
        pageSize: 20,
        total: 0,
        curHeight: null,
        tabsHeight: null,
        queryType: true,
        mchType: '',
        mchIdOptions: [],
        memberIdOptions: [],
        productOptions: [],
        paymentStatus: '', // 付款状态
        shippingStatus: '', // 配送状态
        orderStatus: '', // 订单状态
        allStatus:1 ,//全部状态
        query: {
          date: [],
          orderSn: '',
          memberId: '',
          phone: '',
          productId: ''
        },
        keyword: {
          date: [],
          orderSn: '',
          memberId: '',
          phone: '',
          productId: ''
        },
        pickerOptions: { //时间快捷选择
          shortcuts: [{
            text: '昨天',
            onClick(picker) {
              const end = new Date()
              const start = new Date()
              start.setTime(start.getTime() - 3600 * 1000 * 24)
              picker.$emit('pick', [start, end])
            }
          }, {
            text: '最近一周',
            onClick(picker) {
              const end = new Date()
              const start = new Date()
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
              picker.$emit('pick', [start, end])
            }
          }, {
            text: '最近一个月',
            onClick(picker) {
              const end = new Date()
              const start = new Date()
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
              picker.$emit('pick', [start, end])
            }
          }, {
            text: '最近三个月',
            onClick(picker) {
              const end = new Date()
              const start = new Date()
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
              picker.$emit('pick', [start, end])
            }
          }]
        }
      }
    },
    components: {
      orderList,
      Pagination,
      memberTable,
      productTable
    },
    computed: {
      ...mapGetters([
        'mchId'
      ])
    },
    created() {
      var _this = this
      this.loadMch()

      this.loadOrder()
      this.loadSysmch('')
      EventBus.$on('order-add', res => { // 监听新增完毕
        // 更新列表数组
        _this.orderForm.splice(0, 0, res)
      })
      EventBus.$on('order-edit', res => { // 监听状态更新
        // 更新列表数组
        for (var i = 0; i < _this.orderForm.length; i++) {
          if (_this.orderForm[i].id == res.id) {
            _this.$set(this.orderForm, i, res)
          }
        }
      })
      EventBus.$on('order-delete', res => { // 监听订单删除
        // 更新列表数组
        /* for (var i = 0; i < _this.orderForm.length; i++) {
          if (_this.orderForm[i].id == res.id) {
            _this.orderForm.splice(i,1)
            return;
          }
        } */
        this.loadOrder()
      })
      EventBus.$on('order-view', res => { // 监听订单删除
        // 更新列表数组
        for (var i = 0; i < _this.orderForm.length; i++) {
          if (_this.orderForm[i].id == res.id) {
            _this.$set(this.orderForm, i, res)
          }
        }
      })
    },
    mounted() {
      this.comeIn()
      this.beforeMount()
    },
    methods: {
      loadMch() {
        getInfo().then(res => {
          this.mchType = res.data.mchType
        })
      },
      changeSysMch() {
        this.loadOrder()
      },
      querySysmch(query) {
        this.loadSysmch(query)
      },
      loadSysmch(query) {
        sysMchList({
          name: query
        }).then(res => {
          this.mchIdOptions = res.data.data.filter(val => {
            return val.mchType === 3 || val.mchType === 1
          })
        }).catch(err => {
          console.log(err)
        })
      },
      memberDouble(data) {
        this.memberName = data.name
        this.query.memberId = data.id
        this.memberTableVisible = false
      },
      memberTableClose() {
        this.memberTableVisible = false
      },
      addProductClick(data) {
        if (data.length > 1) {
          this.productName = data[0].name
          this.query.productId = data[0].id
          this.orderVisible = false
          this.$message({
            message: '只能查询一个商品',
            offset: 120,
            center: true
          })
        } else {
          this.productName = data[0].name
          this.query.productId = data[0].id
        }
      },
      doubleClick(val) {
        this.productName = val.name
        this.query.productId = val.id
        this.orderVisible = false
      },
      orderClose() {
        this.orderVisible = false

      },
      toSearchMember() {
        this.memberTableVisible = true
      },
      selectMember(data) {
        if (!utils.isNull(data)) {
          this.memberName = data.name
          this.query.memberId = data.id
        } else {
          this.query.memberId = ''
        }

      },
      toAddProduct() {
        this.orderVisible = true
      },
      changeProduct(data) {
        if (!utils.isNull(data)) {
          this.productName = data.name
          this.query.productId = data.id
        } else {
          this.query.productId = ''
        }

      },
      beforeMount() {
        var _this = this
        window.onresize = () => {
          return (() => {
            if (_this.queryType == false) {
              var h = document.documentElement.clientHeight || document.body.clientHeight
              _this.curHeight = h - 311 //减去页面上固定高度height
              _this.tabsHeight = h - 381
            } else {
              var h = document.documentElement.clientHeight || document.body.clientHeight
              _this.curHeight = h - 224 //减去页面上固定高度height
              this.tabsHeight = h - 294
            }
          })()
        }
      },
      comeIn() {
        console.log('222')
        var h = document.documentElement.clientHeight || document.body.clientHeight
        this.curHeight = h - 224 //减去页面上固定高度height
        this.tabsHeight = h - 294
      },
      loadOrder() {
        var _this = this
        let params = new URLSearchParams()
        params.append('pageNum', _this.pageNum)
        params.append('pageSize', _this.pageSize)
        params.append('shippingStatus', _this.shippingStatus)
        params.append('orderStatus', _this.orderStatus)
        params.append('allStatus', _this.allStatus)
        params.append('startDate', this.keyword.date == null || this.keyword.date.length == 0 ? '' : this.keyword.date[
          0])
        params.append('endDate', this.keyword.date == null || this.keyword.date.length == 0 ? '' : this.keyword.date[1])
        params.append('paymentStatus', _this.paymentStatus)
        params.append('orderSn', _this.keyword.orderSn)
        params.append('memberId', _this.keyword.memberId)
        params.append('productId', _this.keyword.productId)
        params.append('keyword', _this.keyword.phone)
        list(params).then(response => {
          console.log(response)
          _this.orderForm = response.data.data
          _this.total = response.data.total
        }).catch(error => {
          console.log('error!!')
        })
      },
      chooseClick() {
        this.queryType = !this.queryType
        if (this.queryType == false) {
          var h = document.documentElement.clientHeight || document.body.clientHeight
          this.curHeight = h - 311 //减去页面上固定高度height
          this.tabsHeight = h - 381
        } else {
          var h = document.documentElement.clientHeight || document.body.clientHeight
          this.curHeight = h - 224 //减去页面上固定高度height
          this.tabsHeight = h - 294
        }
      },
      queryMember(query) { // 搜索客户
        console.log(query)
        this.memberIdOptions = []
        memberList({
          name: query
        }).then(res => {
          res.data.data.forEach((option, index) => {

            this.$set(this.memberIdOptions, index, option)
          })
        }).catch(err => {
          console.log(err)
        })
      },
      getMemberList() { // 加载客户
        memberList().then(res => {
          res.data.data.forEach((option, index) => {
            this.$set(this.memberIdOptions, index, option)
          })
        }).catch(err => {
          console.log(err)
        })
      },
      queryProduct(query) { // 查询商品
        this.productOptions = []
        productList({
          name: query
        }).then(res => {
          res.data.data.forEach((option, index) => {
            this.$set(this.productOptions, index, option)
          })
        }).catch(err => {
          console.log(err)
        })
      },
      getProductList() { // 加载商品
        productList().then(res => {
          res.data.data.forEach((option, index) => {
            this.$set(this.productOptions, index, option)
          })
        }).catch(err => {
          console.log(err)
        })
      },
      queryClick() {
        this.keyword = this.query
        this.pageNum = 1
        this.loadOrder()
      },
      resetClick() {
        this.query.date = []
        this.query.orderSn = ''
        this.productName = ''
        this.memberName = ''
        this.query.memberId = ''
        this.query.phone = ''
        this.query.productId = ''
        this.keyword = this.query
        this.pageNum = 1
        this.loadOrder()
      },
      detailsClick(data) {
        this.$router.push({
          path: '/order/view',
          query: {
            id: data
          }
        })
      },
      addClick() {
        this.$router.push({
          path: '/order/add?type=add'
        })
      },
      tabsClick(data) {
        var _this = this
        console.log(data)
        switch (data.paneName) {
          case '0':
            console.log(data.paneName)
            _this.paymentStatus = '' // 付款状态
            _this.shippingStatus = '' // 配送状态
            _this.orderStatus = '' // 订单状态
            _this.allStatus ='' //全部状态
            break
          case '1':
            console.log(data.paneName)
            _this.paymentStatus = 1
            _this.shippingStatus = 1
            _this.orderStatus = 1
            //  _this.allStatus =''
            break
            // case '2':
            //   _this.paymentStatus = 1
            //   _this.shippingStatus = 0
            //   _this.orderStatus = 1
            //   break
            // case '3':
            //   _this.paymentStatus = 1
            //   _this.shippingStatus = 1
            //   _this.orderStatus = 1
            //   break
          case '2':
            _this.paymentStatus = 2
            _this.shippingStatus = 0
            _this.orderStatus =2
            _this.allStatus =''
            break
          case '3':
            _this.paymentStatus = ''
            _this.shippingStatus = ''
            _this.orderStatus = 4
            _this.allStatus =''
            break;
          case '4':
            _this.paymentStatus = ''
            _this.shippingStatus = ''
            _this.orderStatus = 3
             _this.allStatus =''
            break;
        }
        this.loadOrder()
      }
    }
  }
</script>

<style scoped>
  .details_card {
    overflow: auto;
    padding-left: 20px;
    padding-right: 20px;
    box-sizing: border-box;
    border: 1px solid #f2f2f2;
    border-radius: 4px;
  }

  .elOption {
    background-color: #909399;
    color: white;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 50%;
    height: 40px
  }

  .details_card:hover {
    box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04)
  }

  .el-input__inner {
    width: 100% !important;
  }

  .app {
    background-color: rgba(248, 248, 248, 0.8);
  }

  /deep/ .el-header {
    padding: 10px;
    /* height: 100% !important; */
    padding-bottom: 0;
  }

  .report_header {
    width: 100%;
    min-height: 40px;
    box-sizing: border-box;
    background-color: rgba(248, 248, 248, 0.8);
    display: flex;
    padding-bottom: 5px;
    position: relative;
    padding-left: 5px;
    padding-right: 5px;
    flex-direction: column;
  }

  .report_header_left {
    width: 5px;
    height: 46px;
    background-color: #409EFF;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
  }

  .report_header_query {
    margin-left: 10px;
    width: 180px;
    margin-top: 5px;
  }

  .report_header_date {
    margin-left: 10px;
    width: 250px;
    margin-top: 5px;
  }
</style>
